<template>
	<view class="pages" :style="'height:'+h+'px'" v-if="info.bg">
		<view class="content">
			<image 
				:src="getimg(info.bg)" 
				class="bg-image"
				mode="aspectFill"
			></image>
			
			<view class="qrcode-container">
				<image 
					:src="qrcodeImage" 
					class="qrcode"
					v-if="qrcodeImage"
				></image>
				<text class="qrcode-text" v-else>二维码生成中...</text>
			</view>
		</view>
		
		<view class="save fr btn" @click="saveImage">
			<text class="save_">保存邀请码到相册</text>
		</view>
		<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
import $util from '@/util/util';
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				info: {},
				qrcodeImage: '' // 存储生成的二维码图片
			}
		},
		created() {
			let _ = this
			$util.showProgress('正在生成邀请码')
			$util.ajax({
				url:'Member/getcode'
			},(r,e)=>{
				setTimeout(()=>{
					$util.hideProgress()	
				},1000)
				if(r.code == 1){
					_.info = r.data
					// 生成二维码图片
					this.generateQRCode()
				}else{
					$util.hideProgress()	
					$util.alert(r.msg,()=>{
						uni.navigateBack()
					})
				}
			})
		},
		methods: {
			getimg(path){
				return $util.get_img(path)
			},
			// 生成二维码图片（使用在线API）
			generateQRCode() {
				const text = `https://api.bigcc.net.cn/index/index/ecodejump?uid=${this.info.userid}&sigin=${this.info.sigin}`;
				// 使用在线二维码生成服务
				const qrcodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(text)}`;
				this.qrcodeImage = qrcodeUrl;
			},
			// 保存图片
			saveImage() {
				if (!this.info.bg) {
					$util.toast('背景图片未加载完成')
					return
				}
				
				// 由于无法直接保存页面截图，提示用户手动截图
				$util.alert('请手动截图保存邀请码')
			}
		}
	}
</script>

<style scoped>
.pages{
	background: #ffffff;
}
.content {
	width: 710rpx;
	height: 1200rpx;
	position: relative;
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
.bg-image {
	width: 100%;
	height: 100%;
	display: block;
}
.qrcode-container {
	position: absolute;
	bottom: 53rpx;
	right: 20rpx;
	width: 120rpx;
	height: 120rpx;
	background: #ffffff;
	padding: 10rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.qrcode {
	width: 100%;
	height: 100%;
	display: block;
}
.qrcode-text {
	font-size: 24rpx;
	color: #666666;
}
.save{
	width: 710rpx;
	height: 100rpx;
	align-items: center;
	justify-content: center;
	background: #419cff;
	margin: 20rpx;
	border-radius: 20rpx;
}
.save_{
	font-size: 32rpx;
	color: #ffffff;
}
</style>